<template>
<div>
    <el-button type="primary" @click="add()">新增</el-button>
    <el-input style="width:300px;margin-left: 100px;" v-model="state.searchData.name" 
    @input="changeSearch" clearable
      :prefix-icon="LocationFilled" placeholder="请输入分类名称" />
    <el-table
      :data="state.tableData"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <!-- <el-table-column type="selection" width="55" /> -->
      <el-table-column fixed prop="id" label="ID" width="55" />
      <el-table-column prop="name" label="名称" />
      <el-table-column fixed="right" label="操作">
        <template #default="scope">
          <el-button link type="danger" @click="showDeletePopover(scope.row.id)"
            >删除</el-button
          >
          <el-button
            v-if="!scope.row.isKefu"
            link
            type="primary"
            @click="updateProvince(scope.row.id,scope.row.name)"
            >修改</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-dialog v-model="dialogFormVisible" title="添加">
    <el-form>
      <el-form-item label="名称">
        <el-input v-model="dialogForm.name" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmAddRequest">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
    <el-dialog v-model="updatedialogFormVisible" title="修改">
    <el-form>
      <el-form-item label="名称">
        <el-input v-model="dialogForm2.name" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="updatedialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmUpdateRequest">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
  </div>
  <div class="demo-pagination-block" style="margin-top:30px;">
      <el-pagination
        v-model:current-page="state.searchData.page"
        v-model:page-size="state.searchData.limit"
        :page-sizes="
          state.searchData.total <= 40
            ? [10, 20, 30, 40]
            : [10, 20, 30, 40, state.searchData.total]
        "
        :disabled="false"
        :background="true"
        layout="->,total, sizes, prev, pager, next, jumper"
        :total="state.searchData.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  

  
</template>
<script setup>
import { ref, reactive, onMounted, markRaw, onBeforeMount } from "vue";
import { Edit, User, LocationFilled } from "@element-plus/icons-vue";
import { ElMessageBox, ElMessage } from "element-plus";
import router from "../../router";
import request from "../../api/request";
import * as echarts from "echarts";
const dialogFormVisible = ref(false)
const updatedialogFormVisible  = ref(false)
const isShowDeletaBatchBtn = ref(true)
const dialogForm = reactive({
  name: ''
})
const dialogForm2 = reactive({
  id: '',
  name: ''
})
const state = reactive({
  tableData: [],
  searchData: {
    page: 1,
    limit: 10,
    name: ""
  },
});
onBeforeMount(() => {
  initData();
});

const initData = () => {
  let authentication = localStorage.getItem("adminInfo");
  if (!(authentication == 2)) {
    router.push("/admin/login");
    return;
  }
  request.post("/classify/list", state.searchData).then((res) => {
    if (res.code == 200) {
      state.tableData = res.data.records;
      state.searchData.total = res.data.total;
    }
  });
};
const add = () => {
  dialogFormVisible.value = true
};
const updateProvince = (id,name) => {
  dialogForm2.id = id
  dialogForm2.name = name
  updatedialogFormVisible.value = true
};
const confirmUpdateRequest = () => {
  let params = {
    id: dialogForm2.id,
    name: dialogForm2.name,
  }
  request.post("/classify/update", params).then((res) => {
    if (res.code == 200) {
      updatedialogFormVisible.value = false
      initData()
    }
  });
};
const confirmAddRequest = () => {
  let params = {
    name: dialogForm.name,
  }
  request.post("/classify/add", params).then((res) => {
    if (res.code == 200) {
      dialogFormVisible.value = false
      dialogForm.name = ''
      initData()
    }
  });
};

const showDeletePopover = (id) => {
  ElMessageBox.confirm(`您确定删除吗`, "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
    draggable: true,
  })
    .then(() => {
      request.post("/classify/remove", id).then((res) => {
        ElMessage({
          type: "success",
          message: res.msg,
        });
        if (res.code == 200) {
          initData();
        }
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "已取消",
      });
    });
};

const handleCurrentChange = (page) => {
  state.searchData.page = page;
  initData();
};

const handleSizeChange = (limit) => {
  state.searchData.limit = limit;
  initData();
};
const changeSearch = (val) => {
  initData();
};
</script>
